<template>
  <div v-if="extend.length>0">
    <sticky
      :z-index="10"
      :class-name="'sub-navbar draft '"
      style="margin: 5px 0;"
      v-if="select_count_money+select_money>0"
    >
      <div class="flex_row" style="padding-left: 10px;">
        <div class="total_price">
          总费用：
          <span class="total_price_color">¥{{select_count_money+select_money}}</span>
        </div>
        <el-button type="warning" size="small" round @click="onBuy">立即购买</el-button>
      </div>
    </sticky>
    <div class="layout-all">
      <div class="layout-content">
        <!-- 余额开始 -->
        <el-row :gutter="1">
          <el-col :xs="24" :sm="24" :lg="extend[0].is_show==0?8:6" class="chart-wrapper">
            <div class="flex_row" style="padding-left: 10px;">
              <template v-if="extend[0].is_show==0">
                <img
                  class="balance_item_img_ver"
                  src="../../image/shou/ver_pt.png"
                  alt
                  @click="show_content(extend[0])"
                />
                <img
                  class="balance_item_img"
                  style="margin-left: 10px;"
                  src="../../image/ic_up_vip.png"
                  alt
                  @click="show_content(extend[0])"
                />
                <div class="balance_item_text" alt @click="show_content(extend[0])">升级专业版</div>
              </template>
              <img class="balance_item_img_ver" v-else src="../../image/shou/ver_zy.png" alt />

              <img
                class="balance_item_img"
                style="margin-left: 10px;"
                src="../../image/shou/shou_116.png"
                alt
              />
              <div class="balance_item_text">收付通余额</div>
              <div class="balance_item_text">{{balance}}元</div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="6" class="chart-wrapper">
            <div class="flex_row">
              <el-button-group class="flex_row" style="padding-left: 10px;">
                <el-button type="info" size="small" round @click="money_visible=true">记录</el-button>
                <el-button type="success" size="small" round @click="goto(0)">充值</el-button>
                <el-button type="primary" size="small" round @click="goto(1)">提现</el-button>
              </el-button-group>
              <div v-if="exp_time!=''" style="margin: 0 10px">
                <mallki
                  class-name="mallki-text"
                  :text="'截止时间:'+exp_time"
                  @onClick="exp_visible=true"
                />
              </div>
            </div>
          </el-col>
          <!-- 余额结束 -->
        </el-row>

        <!-- 项目类型开始 -->
        <div class="menu_content">
          <div class="flex_row">
            <div class="title_line"></div>
            <div class="title_text">项目类型</div>
          </div>
          <div class="content_list">
            <el-row :gutter="12" class="row_content align_start">
              <el-col :xs="24" :sm="24" :lg="5" class="chart-wrapper">
                <label>
                  <div class="list_item flex_row">
                    <div class="item_chekcbox">
                      <el-checkbox :checked="true" :disabled="true"></el-checkbox>
                    </div>
                    <div class="item_img">
                      <img src="../../image/extend/kuozhan_11.png" alt />
                    </div>
                    <div class="item_info">
                      <div class="info_title">小程序</div>
                      <div class="info_discription">入口丰富，传播力强</div>
                      <div class="info_price">¥5000元</div>
                    </div>
                    <img class="get_img" src="../../image/extend/xuanzhong_03.png" alt srcset />
                  </div>
                </label>
              </el-col>
              <el-col :xs="24" :sm="24" :lg="5" class="chart-wrapper">
                <label>
                  <div class="list_item flex_row">
                    <div class="item_chekcbox">
                      <el-checkbox :checked="true" :disabled="true"></el-checkbox>
                    </div>
                    <div class="item_img">
                      <img src="../../image/extend/kuozhan_05.png" alt />
                    </div>
                    <div class="item_info">
                      <div class="info_title">H5</div>
                      <div class="info_discription">不限软件随时使用</div>
                      <div class="info_price">¥5000元</div>
                    </div>
                    <img class="get_img" src="../../image/extend/xuanzhong_03.png" alt srcset />
                  </div>
                </label>
              </el-col>
              <!-- 公众号 -->
              <el-col :xs="24" :sm="24" :lg="5" class="chart-wrapper">
                <label>
                  <div class="list_item flex_row">
                    <div class="item_chekcbox">
                      <el-checkbox
                        v-model="extend[1].is_show_value"
                        :disabled="extend[1].is_show"
                        @change="change_arr(1)"
                      ></el-checkbox>
                    </div>
                    <div class="item_img">
                      <img :src="extend[1].thumb" alt />
                    </div>
                    <div class="item_info">
                      <div class="info_title">{{extend[1].title}}</div>
                      <div class="info_discription">{{extend[1].desc}}</div>
                      <div class="info_price">¥{{extend[1].price}}元</div>
                    </div>
                    <img
                      class="get_img"
                      src="../../image/extend/xuanzhong_03.png"
                      alt
                      srcset
                      v-if="extend[1].is_show"
                    />
                    <div class="content_btn" @click="show_content(extend[1])">详情</div>
                  </div>
                </label>
              </el-col>
              <!-- APP -->
              <el-col :xs="24" :sm="24" :lg="5" class="chart-wrapper">
                <label>
                  <div class="list_item flex_row">
                    <div class="item_chekcbox">
                      <el-checkbox
                        v-model="extend[2].is_show_value"
                        :disabled="extend[2].is_show"
                        @change="change_arr(2)"
                      ></el-checkbox>
                    </div>
                    <div class="item_img">
                      <img :src="extend[2].thumb" alt />
                    </div>
                    <div class="item_info">
                      <div class="info_title">{{extend[2].title}}</div>
                      <div class="info_discription">{{extend[2].desc}}</div>
                      <div class="info_price">¥{{extend[2].price}}元</div>
                    </div>
                    <img
                      class="get_img"
                      src="../../image/extend/xuanzhong_03.png"
                      alt
                      srcset
                      v-if="extend[2].is_show"
                    />
                    <div class="content_btn" @click="show_content(extend[2])">详情</div>
                  </div>
                </label>
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- 项目类型结束 -->
        <!-- 可扩展功能开始 -->
        <div class="menu_content">
          <div class="flex_row">
            <div class="title_line"></div>
            <div class="title_text">可扩展功能</div>
          </div>
          <el-row :gutter="12" class="row_content align_start">
            <el-col :xs="24" :sm="24" :lg="5" class="chart-wrapper">
              <!-- 直播 -->
              <label>
                <div class="list_item flex_row">
                  <div class="item_chekcbox">
                    <el-checkbox
                      v-model="extend[5].is_show_value"
                      :disabled="extend[5].is_show"
                      @change="change_arr(5)"
                    ></el-checkbox>
                  </div>
                  <div class="item_img">
                    <img :src="extend[5].thumb" alt />
                  </div>
                  <div class="item_info">
                    <div class="info_title">{{extend[5].title}}</div>
                    <div class="info_discription">{{extend[5].desc}}</div>
                    <div class="info_price">¥{{extend[5].price}}元</div>
                  </div>
                  <img
                    class="get_img"
                    src="../../image/extend/xuanzhong_03.png"
                    alt
                    srcset
                    v-if="extend[5].is_show"
                  />
                  <div class="content_btn" @click="show_content(extend[5])">详情</div>
                </div>
              </label>
            </el-col>
            <!-- 多商户 -->
            <el-col :xs="24" :sm="24" :lg="5" class="chart-wrapper">
              <label>
                <div class="list_item flex_row">
                  <div class="item_chekcbox">
                    <el-checkbox
                      v-model="extend[4].is_show_value"
                      :disabled="extend[4].is_show"
                      @change="change_arr(4)"
                    ></el-checkbox>
                  </div>
                  <div class="item_img">
                    <img :src="extend[4].thumb" alt />
                  </div>
                  <div class="item_info">
                    <div class="info_title">{{extend[4].title}}</div>
                    <div class="info_discription">{{extend[4].desc}}</div>
                    <div class="info_price">¥{{extend[4].price}}元</div>
                  </div>
                  <img
                    class="get_img"
                    src="../../image/extend/xuanzhong_03.png"
                    alt
                    srcset
                    v-if="extend[4].is_show==1||extend[0].is_show==1"
                  />
                  <div class="content_btn" @click="show_content(extend[4])">详情</div>
                </div>
              </label>
            </el-col>
          </el-row>
        </div>
        <!-- 可扩展功能结束 -->
        <!-- 营销功能开始 -->
        <div class="menu_content">
          <div class="flex_row">
            <div class="title_line"></div>
            <div class="title_text">营销功能</div>
          </div>
          <div class="content_list">
            <el-row :gutter="12" class="row_content align_start">
              <!-- 营销功能 -->
              <el-col :xs="24" :sm="24" :lg="5" class="chart-wrapper">
                <label>
                  <div class="list_item flex_row">
                    <div class="item_chekcbox">
                      <el-checkbox
                        v-model="extend[3].is_show_value"
                        :disabled="extend[3].is_show"
                        @change="change_arr(3)"
                      ></el-checkbox>
                    </div>
                    <div class="item_img">
                      <img :src="extend[3].thumb" alt />
                    </div>
                    <div class="item_info">
                      <div class="info_title">{{extend[3].title}}</div>
                      <div class="info_discription">{{extend[3].desc}}</div>
                      <div class="info_price">¥{{extend[3].price}}元</div>
                    </div>
                    <img
                      class="get_img"
                      src="../../image/extend/xuanzhong_03.png"
                      alt
                      srcset
                      v-if="extend[3].is_show"
                    />
                    <div class="content_btn" @click="show_content(extend[3])">详情</div>
                  </div>
                </label>
              </el-col>
              <!-- 营销功能 -->
              <div v-for="(item,i) in extend_arr" :key="i">
                <el-col :xs="24" :sm="24" :lg="5" class="chart-wrapper">
                  <label>
                    <div class="list_item flex_row">
                      <div class="item_chekcbox">
                        <el-checkbox
                          v-model="item.is_show_value"
                          :disabled="item.is_show"
                          @change="change_extend_arr(i)"
                        ></el-checkbox>
                      </div>
                      <div class="item_img">
                        <img :src="item.thumb" alt />
                      </div>
                      <div class="item_info">
                        <div class="info_title">{{item.title}}</div>
                        <div class="info_discription">{{item.desc}}</div>
                        <div class="info_price">¥{{item.price}}元</div>
                      </div>
                      <img
                        class="get_img"
                        src="../../image/extend/xuanzhong_03.png"
                        alt
                        srcset
                        v-if="item.is_show"
                      />
                      <div class="content_btn" @click="show_content(item)">详情</div>
                    </div>
                  </label>
                </el-col>
              </div>
            </el-row>
          </div>
        </div>
        <!-- 营销功能结束 -->
        <!-- 使用期 -->
        <div class="menu_content">
          <div class="flex_row">
            <div class="title_line"></div>
            <div class="title_text">高级</div>
          </div>
          <div class="content_list">
            <el-row :gutter="12" class="row_content align_start">
              <div v-for="(item,i) in extend.slice(9,12)" :key="i">
                <el-col :xs="24" :sm="24" :lg="5" class="chart-wrapper">
                  <label>
                    <div class="list_item flex_row">
                      <div class="item_chekcbox">
                        <el-checkbox v-model="item.is_show_value" @change="change_extend_time(i)"></el-checkbox>
                      </div>
                      <div class="item_img">
                        <img :src="item.thumb" alt />
                      </div>
                      <div class="item_info">
                        <div class="info_title">{{item.title}}</div>
                        <div class="info_discription">{{item.desc}}</div>
                        <div class="info_price">¥{{item.price}}元</div>
                      </div>
                      <img
                        class="get_img"
                        src="../../image/extend/xuanzhong_03.png"
                        alt
                        srcset
                        v-if="item.is_show"
                      />
                      <div class="content_btn" @click="show_content(item)">详情</div>
                    </div>
                  </label>
                </el-col>
              </div>
            </el-row>
          </div>
        </div>

        <!-- 上传产品数量开始 -->
        <div class="menu_content" v-if="buy_goods_count>0">
          <div class="flex_row">
            <div class="title_line"></div>
            <div class="title_text">上传产品数量(当前为:{{buy_goods_count}})</div>
          </div>
          <div class="content_list">
            <el-row :gutter="12" class="row_content align_start">
              <div v-for="(item,i) in select_count" :key="i">
                <el-col :xs="24" :sm="24" :lg="5" class="chart-wrapper">
                  <label>
                    <div class="list_item just_between flex_row">
                      <div class="item_left flex_row">
                        <div class="item_chekcbox">
                          <el-checkbox v-model="item.value" @change="select_count_fun(i)"></el-checkbox>
                        </div>
                        <div class="item_num">+{{item.num}}个</div>
                      </div>
                      <div class="item_price">¥{{item.money}}元</div>
                      <img
                        class="get_img"
                        src="../../image/extend/xuanzhong_03.png"
                        alt
                        srcset
                        v-if="false"
                      />
                    </div>
                  </label>
                </el-col>
              </div>
            </el-row>
          </div>
        </div>
        <!-- 上传产品数量结束 -->

        <!-- 资金记录 -->
        <drawer
          title="资金记录"
          :isShow="money_visible"
          @update:isShow="money_visible=false"
          width="0.5"
        >
          <money-log />
        </drawer>
      </div>
      <!-- 详情 -->
      <el-dialog
        :title="content_title"
        :center="true"
        :visible.sync="content_visible"
        :width="device=='mobile'?'100%':'30%'"
        v-if="content_visible"
      >
        <el-button
          v-if="content_title=='专业版'"
          type="primary"
          icon="el-icon-magic-stick"
          @click="buy_ver"
        >立即升级</el-button>
        <div class="content_box" v-html="content"></div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import moneyLog from "@/components/orderlist/moneyLog";
import Sticky from "@/components/Sticky"; // 粘性header组件
import Mallki from "@/components/TextHoverEffect/Mallki";
export default {
  components: { moneyLog, Sticky, Mallki },
  computed: {
    device() {
      return this.$store.state.app.device;
    }
  },
  data() {
    return {
      content_title: "",
      exp_time: "",
      content: "",
      content_visible: false,
      exp_visible: false,
      balance: 0,
      money_visible: false,
      extend: [],
      select: [],
      select_count_money: 0,
      select_count_num: 0,
      select_count: [
        { num: 10, money: 100, value: false },
        { num: 20, money: 180, value: false },
        { num: 50, money: 400, value: false }
      ],
      select_money: 0,
      extend_arr: [],
      checkList: [],
      //项目类型多选
      ProjectTypeCheckbox: [],
      //可扩展功能多选
      extendCheckbox: [],
      //营销功能多选
      marketingCheckbox: [],
      //上传产品数量
      uploadNumCheckbox: []
    };
  },
  mounted() {
    this.thumb_url = process.env.VUE_APP_BASE_API + "/pub/Upload/upload";
    this.onSearch();
  },
  methods: {
    //购买专业版
    buy_ver() {
      this.select_count_money = 0;
      this.select_count_num = 0;
      this.select_money = this.extend[0].price;
      this.select = [1];
      this.onBuy();
    },
    goto(id) {
      this.$router.push("./order?type=" + id);
    },
    change_arr(e) {
      if (e == 3) {
        for (let i in this.extend_arr) {
          if (
            this.extend[e].is_show_value &&
            this.extend_arr[i].is_show_value
          ) {
            var index = this.select.indexOf(this.extend_arr[i].id);
            if (index >= 0) {
              this.select.splice(index, 1);
              this.select_money -= this.extend_arr[i].price;
            }
          }
          this.extend_arr[i].is_show_value = this.extend[e].is_show_value;
          this.extend_arr[i].is_show = this.extend[e].is_show_value;
        }
      }

      if (this.extend[e].is_show_value) {
        this.select.push(this.extend[e].id);
        if (e != 4 || this.extend[0].is_show != 1)
          this.select_money += this.extend[e].price;
      } else {
        var index = this.select.indexOf(this.extend[e].id);
        if (index >= 0) {
          this.select.splice(index, 1);
          if (e != 4 || this.extend[0].is_show != 1)
            this.select_money -= this.extend[e].price;
        }
      }
      console.log(this.select);
    },
    msg_confirm(msg, title, input) {
      // eslint-disable-next-line space-infix-ops
      title = title || "提示";
      const newDatas = [];
      const h = this.$createElement;
      const confirmText = msg.split("\n");
      for (const i in confirmText) {
        newDatas.push(h("p", null, confirmText[i]));
      }

      return this.$confirm(h("p", null, newDatas), title, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (!input) {
            this.$message({
              type: "success",
              message: "操作成功"
            });
          }
          return Promise.resolve(true);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "操作已取消"
          });
          return Promise.reject(false);
        });
    },
    select_count_fun(i) {
      if (this.select_count[i].value) {
        this.select_count_money = this.select_count[i].money;
        this.select_count_num = this.select_count[i].num;
        for (let k in this.select_count) {
          if (k != i) this.select_count[k].value = false;
        }
      } else {
        this.select_count_money = 0;
        this.select_count_num = 0;
      }
    },
    change_extend_arr(e) {
      if (this.extend_arr[e].is_show_value) {
        this.select.push(this.extend_arr[e].id);
        this.select_money += this.extend_arr[e].price;
      } else {
        var index = this.select.indexOf(this.extend_arr[e].id);
        if (index >= 0) {
          this.select.splice(index, 1);
          this.select_money -= this.extend_arr[e].price;
        }
      }
    },
    change_extend_time(e) {
      e += 9;
      if (this.extend[e].is_show_value) {
        for (let i = 9; i < 12; i++) {
          var index = this.select.indexOf(this.extend[i].id);
          if (index >= 0) {
            this.extend[i].is_show_value = false;
            this.select.splice(index, 1);
            this.select_money -= this.extend[i].price;
          }
        }
        this.select.push(this.extend[e].id);
        this.select_money += this.extend[e].price;
      } else {
        var index = this.select.indexOf(this.extend[e].id);
        if (index >= 0) {
          this.select.splice(index, 1);
          this.select_money -= this.extend[e].price;
        }
      }
    },
    // 查询
    onSearch() {
      this.get("/admin/Extend/index", {}, "POST").then(e => {
        let bn = true;
        for (let i in e.extend) {
          e.extend[i].is_show = e.extend[i].is_show == 1;
          e.extend[i].is_show_value = e.extend[i].is_show;
          if (e.extend[i].level == 2) {
            if (!e.extend[i].is_show_value) {
              bn = false;
            }
            this.extend_arr.push(e.extend[i]);
          }
        }
        this.exp_time = e.exp_time;
        this.extend = e.extend;
        this.extend[3].is_show_value = bn;
        this.extend[3].is_show = bn;

        // this.per_page = e.list.per_page
        // this.total = e.list.total
        // this.current_page = e.list.current_page
        this.balance = e.balance;
        this.buy_goods_count = e.buy_goods_count;
      });
    },
    onBuy() {
      let text = "";
      for (let i in this.select) {
        for (let j in this.extend) {
          if (this.extend[j].id == this.select[i]) {
            text +=
              "项目:" +
              this.extend[j].title +
              "\t价格:" +
              this.extend[j].price +
              "元\n";
            break;
          }
        }
      }
      if (this.select_count_money > 0) {
        text += "扩容上传商品数量:" + this.select_count_money + "元\n";
      }
      text += "总价:" + (this.select_count_money + this.select_money) + "元\n";
      const from = {
        select: this.select,
        count_money: this.select_count_money,
        count: this.select_count_num
      };
      this.msg_confirm(text, "确认购买", true).then(e => {
        this.content_visible = false;
        this.get("/admin/Extend/buy", from, "POST").then(e => {
          if (e.status != undefined) {
            this.msg_confirm("余额不足,请先充值").then(e => {
              const win = this.$router.resolve({ path: "/index/order" });
              window.open(win.href, "_blank");
            });
          } else {
            this.$msg_ok("success", "购买成功");
            this.$router.go(0);
          }
        });
      });
    },
    //展示详情介绍
    show_content(item) {
      this.content = item.content;
      this.content_title = item.title;
      this.content_visible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 16px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin: 16px 16px;
  }
}

@media (max-width: 550px) {
  .chart-wrapper {
    margin: 16px 0 !important;
  }
  .chart-wrapper-xf {
    width: 100%;
  }
}
</style>

<style>
.flex_row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

/* 我的余额开始 */
.balance_content {
  height: 80px;
  width: 100%;
  padding: 0px 10px;
  border-radius: 10px;
  background-color: #ffffff;
}
.balance_item_img {
  width: 30px;
  height: 30px;
}
.balance_item_img_ver {
  width: 90px;
  height: 30px;
}
.balance_item_text {
  font-size: 16px;
  color: #333333;
  margin-left: 10px;
}
.btn_list {
  margin-left: 50px;
}
.balance_item_btn {
  width: 80px;
  height: 30px;
  /* line-height: 30px; */
  text-align: center;
  border-radius: 40px;
  align-items: center;
  display: flex;
  justify-content: space-around;
  font-size: 14px;
  margin-right: 15px;
}
.withdraw {
  background-color: #9058f9;
  color: #ffffff;
}
.recharge {
  border: 2px solid #9058f9;
  color: #9058f9;
}
/* 我的余额结束 */

.just_between {
  justify-content: space-between !important;
}
.layout-all {
  margin-top: 10px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 10px;
}
.menu_content {
  padding: 10px;
}
.title_line {
  height: 20px;
  width: 5px;
  background-color: #744cf9;
}
.title_text {
  margin-left: 10px;
  font-size: 18px;
  color: #333333;
}
.content_list {
  padding: 5px 0px 10px 0px;
}
.list_item {
  margin: 3px 15px;
  background-color: #ffffff;
  width: 300px;
  height: 90px;
  border: 1px solid #f0f0f0;
  position: relative;
}
.content_btn {
  width: 50px;
  height: 30px;
  padding-right: 5px;
  padding-top: 3px;
  background-color: blanchedalmond;
  color: #9058f9;
  font-size: 12px;
  text-align: right;
  line-height: 30px;
  border-radius: 100% 0px 0px 0px;
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.item_chekcbox {
  margin-left: 15px;
  width: 10px;
}
.item_img {
  margin-left: 15px;
  width: 60px;
  height: 60px;
}
.item_img img {
  width: 60px;
  height: 60px;
}
.list_item .get_img {
  position: absolute;
  top: 0;
  right: 0;
  width: 47px;
  height: 52px;
}
.item_info {
  font-weight: normal;
  margin-left: 10px;
  width: 150px;
}
.info_title {
  font-size: 18px;
  font-weight: bold;
}
.info_discription {
  font-size: 13px;
  margin: 2px 0px;
  color: #999999;
}
.info_price {
  color: tomato;
  font-size: 14px;
}
.item_num {
  margin-left: 15px;
  font-size: 18px;
  font-weight: bold;
}
.item_price {
  color: tomato;
  font-size: 14px;
  padding-right: 20px;
}
.submit {
  height: 100px;
  width: 100%;
  justify-content: flex-end !important;
  padding-right: 100px;
  background-color: #ffffff;
}
.total_price {
  font-size: 14px;
  margin-right: 30px;
}
.total_price_color {
  color: tomato;
  font-size: 18px;
}
.buy_now {
  color: #ffffff;
  background-color: tomato;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
}
.content_box {
  padding: 0px 5px;
}
.content_box img {
  width: 100%;
}
</style>
